<link rel="stylesheet" type="text/css" media="screen" href="../../../css/jerarquia.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="../../../js/mindmaps/libs/jquery.tmpl.js"></script>
<script id="template-open" type="text/x-jquery-tmpl">
    <div id="open-dialog" class="file-dialog" title="Ver Nodo">

    </div>
</script>
<script>   
    function Dialog() {
        var x = 'center';
        var y = document.body.clientHeight / 3;
        this.dialog = $("#ventana").dialog({
            position: [x, y],
            modal : true,
            zIndex : 5000,
            width : 700,
            close : function() {
                $(this).dialog("destroy");
                $(this).empty();
            }
        });
            
        this.open = function(){
            this.dialog.dialog("open");
        }
            
        this.close = function(){
            this.dialog.dialog("close");
        }
    }
        
    function abrir(text){
        
        var $test = $("#template-open").tmpl().appendTo("#ventana");
        var dialog = new Dialog();
        $("#open-dialog").html('<div id="nodo"></div><img id="loader_nodo" src="../../../images/loader.gif" style="vertical-align: middle; display: none" alt ="loading"/>');
        $("#open-dialog").ready(function(){
            dialog.open();
        });    
            
        $('#loader_nodo').show();  
        $('#nodo').hide();
        $("#nodo").load(
        $('#form_nodo').attr('action'),
        {
            nodo_id: text,
            nodo_padre_id: null,
            nodo_x: null,
            nodo_y: null,
            edicion: false,
            hipermedio_id: null
        },
        function() {
            $('#loader_nodo').hide();
            $('#nodo').show();
        }
    );
            
    }
</script>

<!-- Espacio para la ventana --> 
<div id="ventana"></div>

<blockquote class="align_center">"<?php echo $hipermedio->getNombre(); ?>"</blockquote>

<div id="menu" class="align_right">
    <div id="print"><a href="javascript:print()"><img src="../../../images/iconos/imprimir.gif" alt="Imprimir" title="Imprimir"/></a></div>
<!--    <div id="print"><img src="../../../images/iconos/email.png" alt="Enviar" title="Enviar por correo"/></div>-->
    <div id="enviar"><a href="<?php echo url_for('mapa/show/?hipermedio_id=' . $hipermedio->getId()) ?>"><img src="../../../images/iconos/mapa.png" alt="Volver al mapa" title="Volver al mapa"/></a></div>
</div>

<form action="<?php echo url_for('nodo/CargarNodo') ?>" method="get" id="form_nodo">
</form>
<div id="jerarquia">
    <?php
    /*
     * To change this template, choose Tools | Templates
     * and open the template in the editor.
     * 
     *
     */

// Obtención del mapa
    $myArray = $sf_data->getRaw('mapa');
    $nodos = $myArray['mindmap'];


    foreach ($nodos as $nodo) {
        llamarhijo($nodo, 1);
    }

    function llamarhijo($nodo_padre, $nivel) {
        echo '<div class="titulo titulo_' . $nivel . ' ' . $nodo_padre['cssClass'] . '_transp"><a href="javascript:abrir(\'' . $nodo_padre['id'] . '\')">' . $nodo_padre['text']['caption'] . '</a></div>';

        if (is_null($nodo_padre['children'])) {
            return null;
        } else {
            foreach ($nodo_padre['children'] as $nodo) {
                llamarhijo($nodo, $nivel + 1);
            }
        }
    }
    ?>
</div>

